<template>
  <div class="wrap">
    <div class="navigator" @click="showMask = true">
      成为商家
      <img src="@/assets/question.png" alt="" class="question" />
    </div>
    <img src="@/assets/beSale.png" alt="" class="beSale" />
    <div class="bgWrap">
      <div class="item">
        <div class="left">
          <em class="redPoint"></em>
          店铺头像
        </div>
        <div class="right">
          <!-- <img src="@/assets/uploadImg.png" alt="" class="uploadImg" /> -->
          <van-uploader
            v-model="fileList"
            :after-read="afterRead"
            :max-count="1"
            class="uploadImg"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          店铺名称
        </div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="shopName"
            maxlength="20"
            placeholder="请输入店铺名称(20字内)"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          店铺类型
        </div>
        <div class="inputWrap" @click="show = true" style="line-height:40px;padding-left:10px;width:calc(100% - 10px);">
          <!-- <input
            type=""
            name=""
            value=""
            v-model="chooseShop.title"
            placeholder="请选择店铺类型(5字内)"
          /> -->
          {{chooseShop.title||'请选择店铺类型(5字内)'}}
          <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          联系人
        </div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="contactName"
            placeholder="请输入联系人名字(5字内)"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          联系电话
        </div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="contactPhone"
            placeholder="请输入联系电话"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          身份照号码
        </div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="idCardNum"
            placeholder="请输入身份证号码"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          所在校区
        </div>
        <div class="inputWrap" @click="chooseSchool">
          <input
            type=""
            name=""
            value=""
            v-model="chooseSchoolData.schoolIName"
            placeholder="请选择校区"
          />
          <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <!-- <em class="redPoint"></em> -->
          学号
        </div>
        <div class="inputWrap">
          <input type="number" name="" value="" v-model="schoolNumber" placeholder="请输入学号" />
        </div>
      </div>
    </div>
    <div class="agreement">
      <van-checkbox v-model="checked" checked-color="#000">
        已阅读并同意
      </van-checkbox>
      <em class="merchant" @click="jumpAgreement">《商家入驻协议》</em>
    </div>

    <div class="nextButton" @click="JumpNext">下一步</div>
    <div class="popupWrap">
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-picker
          title="选择店铺类型"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-popup>
    </div>
    <!-- 遮罩层-入驻说明 -->
    <div class="maskWrap" v-if="showMask">
      <div class="maskBg" @click="showMask = false"></div>
      <div class="chooseNumWrap">
        <div class="maskTitle">成为商家申请说明</div>
        <div class="maskExpalin" v-html="resExplainApply">
        </div>
        <div class="maskBack" @click="showMask = false">返回</div>
      </div>
    </div>
  </div>
</template>

<script>
import { regex } from '@/assets/js/identyRules.js'
import { Switch, Checkbox, Popup, Picker, Uploader } from "vant";
import axios from 'axios'; // 引入axios
import {
  apiShopTypeList,
  apiExplainApply,
  apiAgreement
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      checked: true,
      show: false,
      showMask: false,
      columns: [],
      shopName:'',//商铺名称
      contactName:'',//联系人姓名
      contactPhone:'',//联系人电话
      idCardNum:'',//身份证
      schoolNumber:'',//学号
      fileList: [],//店铺头像-组件
      headImage:'',//电偶头像-服务器地址
      resShopTypeList:[],//店铺类型
      chooseShop:'',//选择的店铺类型
      chooseSchoolData:this.$route.query.chooseSchoolData?this.$route.query.chooseSchoolData:'',//选择的学校信息
      resExplainApply:"",//商家入驻说明
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getShopTypeList()
    this.getExplainApply()
    var getApplyInformation = JSON.parse(sessionStorage.getItem('applyInformation'))
    console.log('chooseSchoolData000',getApplyInformation)
    if(getApplyInformation){
        this.fileList=getApplyInformation.fileList
        this.shopName=getApplyInformation.shopName
        this.contactName=getApplyInformation.contactName
        this.contactPhone=getApplyInformation.contactPhone
        this.idCardNum=getApplyInformation.idCardNum
        this.schoolNumber=getApplyInformation.schoolNumber
        this.headImage=getApplyInformation.headImage
        this.chooseShop=getApplyInformation.chooseShop
        this.chooseSchoolData=this.chooseSchoolData
    }
  },
  methods: {
    //上传图片到服务器：
    afterRead(file) {
        var that = this
        var serverSrc = this.$imgUrl
        var form_data = new FormData();
        var files = file.file
        form_data.append('file', files);
        axios({
          url: serverSrc+'/common/upload',
          data: form_data,
          contentType: false,
          processData: false,
          method: 'post',
          headers: {
            'Content-Type': 'multipart/form-data'
          },
        }).then(function (res) {
          that.headImage = res.data.data.fileName
        })
    },
     //获取首页店铺类型：
    getShopTypeList() {
      apiShopTypeList({}).then((res) => {
        this.resShopTypeList = res.data;
        console.log("店铺类型:", this.resShopTypeList);
        this.resShopTypeList.map(item=>{
          this.columns.push(item.title)
        })
      });
    },
    //选择店铺类型：
    onConfirm(value,index){
      this.show = false;
      this.chooseShop = this.resShopTypeList[index]
    },
    //选择学校：
    chooseSchool() {
      // 存入已经填写好的信息：
      var applyInformation = {
        fileList:this.fileList,
        shopName:this.shopName,
        contactName:this.contactName,
        contactPhone:this.contactPhone,
        idCardNum:this.idCardNum,
        schoolNumber:this.schoolNumber,
        headImage:this.headImage,
        chooseShop:this.chooseShop,
        chooseSchoolData:this.chooseSchoolData,
      }
      sessionStorage.setItem('applyInformation',JSON.stringify(applyInformation))
      this.$router.push({
        path: "/pages/schoolList",
        query: {
          //传递参数
          fromId:3
        },
      });
    },
   
   //商家入驻说明：
    getExplainApply() {
      apiExplainApply({}).then((res) => {
        this.resExplainApply = res.data.content;
      });
    },
    //跳转商家入住协议：
    jumpAgreement(){
       var applyInformation = {
        fileList:this.fileList,
        shopName:this.shopName,
        contactName:this.contactName,
        contactPhone:this.contactPhone,
        idCardNum:this.idCardNum,
        schoolNumber:this.schoolNumber,
        headImage:this.headImage,
        chooseShop:this.chooseShop,
        chooseSchoolData:this.chooseSchoolData,
      }
      sessionStorage.setItem('applyInformation',JSON.stringify(applyInformation))
      this.$router.push({
        path: "/pages/comeToShopAgreement",
        query: {
          //传递参数
        },
      });
    },
    //下一步
    JumpNext() {
      if(this.fileList==''||this.shopName==''||this.contactName==''||this.contactPhone==''||this.idCardNum==''||this.headImage==''||this.chooseShop==''||this.chooseSchoolData==''){
        this.$toast.fail('请填写完整申请资料!')
        return
      }else if (!this.checked) {
         this.$toast.fail('请勾选同意商家入驻协议!')
        return
      }
      if(!regex.phone.test(this.contactPhone)){
        this.$toast.fail('请输入正确的手机号')
        return
      }
      if(!regex.cardid.test(this.idCardNum)){
        this.$toast.fail('请输入正确的身份证号')
        return
      }

      // 存入已经填写好的信息：
      var applyInformation = {
        fileList:this.fileList,
        shopName:this.shopName,
        contactName:this.contactName,
        contactPhone:this.contactPhone,
        idCardNum:this.idCardNum,
        schoolNumber:this.schoolNumber,
        headImage:this.headImage,
        chooseShop:this.chooseShop,
        chooseSchoolData:this.chooseSchoolData,
      }
      sessionStorage.setItem('applyInformation',JSON.stringify(applyInformation))
      this.$router.push({
        path: "/pages/payEnter",
        query: {
          //传递参数
        },
      });
    },
    onChange(){

    },
    onCancel(){

    },
  },
  created() {},
  components: {
    [Switch.name]: Switch,
    [Checkbox.name]: Checkbox,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Uploader.name]: Uploader,
  },
};
</script>

<style scoped>
.navigator {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #181818;
}
.question {
  width: 15px;
  padding-top: 5px;
}
.beSale {
  width: 95%;
  display: block;
  margin: 15px auto;
}
.bgWrap {
  width: calc(95% - 30px);
  padding: 20px 15px;
  margin: 0 auto;

  background: #ffffff;
  border-radius: 20px;
}
.item {
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 15px;
}
.left {
  float: left;
  margin-top: 30px;
}
.redPoint {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #ff4646;
  border-radius: 50%;
  margin-bottom: 2px;
}
.right {
  float: right;
}
.uploadImg {
  /* width: 50px;
  height: 50px; */
}
.title {
}
.inputWrap {
  width: 100%;
  background: #f2f4fa;
  height: 40px;
  margin-top: 10px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
}
input {
  border: 0px;
  background: #f2f4fa;
  width: 85%;
  height: 38px;
  margin-left: 15px;
}
input::placeholder {
  font-size: 12px;
  font-weight: 300;
  color: #999999;
}
.rightArrow {
  width: 4px;
  height: 8px;
  margin-right: 15px;
  margin-top: 15px;
}
.agreement {
  color: #000000;
  font-size: 12px;
  width: 95%;
  margin: 23px auto;
}
.merchant {
  color: #f48f5b;
}
.nextButton {
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
.van-checkbox{
  float: left;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: calc(90% - 30px);
  background-color: #fff;
  position: fixed;
  bottom: 35vh;
  border-radius: 20px;
  color: #181818;
  margin-left: 5%;
  padding: 15px;
}
.maskTitle {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}
.maskExpalin {
  font-size: 10px;
  font-weight: 300;
  line-height: 20px;
}
.maskBack {
  width: 115px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  margin-top: 22px;
}
</style>
